<template>
  <div>
     <!-- 头部导航 -->
   <van-nav-bar
  title="登录"
  class="navbar"
/>
<!-- 手机号/验证码表单 -->
<van-form @submit="onSubmit" class="form" ref="form">
  <!-- 表单中的输入框组件 -->
  <!-- 1.input没有name不能提交数据 -->
  <!-- 2.form表单中当button可以触发submit事件 -->
  <!-- 3.name属性标识input框 -->
  <!-- rules：表单校验规则，数组，数组里每一个对象对应着一个表单规则 -->
  <van-field
    v-model=" mobile"
    name="手机号"
   
    placeholder="请输入手机号"
    :rules="mobileRules"
  >
  <template #label>
    <span class="toutiao toutiao-shouji"></span>
  </template>
  </van-field>

  <van-field
    v-model="code"
    name="code"
    
    placeholder="请输入验证码"
    :rules="codeRules"
  >
  <template #label>
    <span class="toutiao toutiao-yanzhengma"></span>
  </template>
  <template #button>
   <van-button
   v-if="isShowCodeBtn" 
   class="code-btn" 
   type="default" 
   size="small" 
   round 
   native-type="button"
   @click="getCode"
   >获取验证码</van-button>
   <van-count-down 
   v-else  
   :time="3*1000" 
   format="ss秒"
   @finish="isShowCodeBtn=true"
   />
  </template>
  </van-field>
  <div style="margin: 16px;">
    <van-button  block type="info" native-type="submit">登录</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
// import { Toast } from 'vant';
import {loginAPI,getCodeAPI} from '@/api'
// import { Toast } from 'vant';
import {mapMutations} from 'vuex'
export default {
  data() {
    const mobileRules=[
    { required: true, message: '请输入手机号',trigger:'onChange' },
    {pattern:/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/ ,message:'手机号格式非法',trigger:'onChange'}
    ]
    const codeRules=[
    { required: true, message: '请填写验证码'},
    {pattern:/^[0-9]{6}$/,message:'请输入6位数的验证码'}
    ]
    return {
      mobile: '',
      code: '',
      mobileRules,
      codeRules,
      isShowCodeBtn:true
    };
  },
  methods: {
  ...mapMutations(['SET_TOKEN']),
  async onSubmit() {
  const {code,mobile}=this
  this.$toast.loading({
  message: '加载中...',  //loading的加载文案
  forbidClick: true, //禁止点击
  });
   try{
     const {data}= await loginAPI(mobile,code)
     this.SET_TOKEN(data.data)
     this.$router.push('/profile')
    this.$toast.success('登录成功')
   }catch(error){
    //区分是js导致的错误还是axios导致的错误
    //axios封装的是错误对象
    //对象.response。data储存着后端返回的数据
    //对象.response.status 后端返回的状态码
    //可选链操作符
     if(error.response?.status===400){
      this.$toast.fail(error.response.data.message)
      
     }else{
      //js导致的错误 或者是507状态码
      throw error
     }
   }
    },
   async getCode(){
    //确保用户输入了有效的手机号
    //1.给form表单绑定ref属性
    //注意点：传入的是name属性 我的name写的是手机号
     await this.$refs.form.validate('手机号')
     //2.显示倒计时
     this.isShowCodeBtn=false
     //3.提示loading
     this.$toast.loading({
      message:'发送验证码中',
      forbidClick:true
     })
     //4.发送验证码
     //此时一定验证成功了手机号
    try{
       await getCodeAPI(this.mobile)
       this.$toast.success('发送验证码成功')
    }catch(error){
      if(error.response?.status===429){
        this.$toast.fail(error.response.data.message)
      }else{
        throw error
      }
    }
    }
  },
};
</script>

<style scoped lang="less">
.navbar{
background:#3296fa;
:deep(.van-nav-bar__title){
  color: #fff;
}
}
:deep(.form){
  .toutiao{
    font-size:40px ;
  }
  .van-field__label{
    flex: 1;
  }
  .van-field__value{
    flex: 20;
  }
}
.code-btn{
  background-color: #eeeeee;
  color: #9a8b7e;
  height: 0.64rem;
}
</style>